<template>
    <!-- 不带图标的节点头 -->
    <div class="timelinehead" :style="headStyle">
        <div class="headicon" :style="iconStyle"></div>
        <div class="headcontent" :style="contentStyle"><slot name="headcontent"></slot></div>
    </div>
</template>

<script>
export default {
    setup() {
        
    },
    props:{
        iconcolor:{
            type:String,
            default:"#42526D"
        },
        bgcolor:{
            type:String,
            default:"#040D21"
        },
        contentcolor:{
            type:String,
            default:"white"
        }
    },
    computed:{
        headStyle(){
            return{
                backgroundColor:this.bgcolor,
            }
        },
        iconStyle(){
            return{
                border:`2px solid ${this.iconcolor}`,
                backgroundColor:this.bgcolor,
            }
        },
        contentStyle(){
            return{
                color:this.contentcolor,
            }
        }
    }
}
</script>

<style scoped>
   .timelinehead{
       display: flex;
       position: relative;
       margin-top: 30px;
       margin-bottom: 30px;
       
   }
   .headicon{
       width: 8px;
       height: 8px;
       border-radius: 50%;
       position: absolute;
       left: -7px;
   }
    .headcontent{
       font-size: 1.2rem;
       width: 50%;
       padding-left: 30px;
   }
</style>